<template>
  <div id="app">
    <!-- 表单结构 -->
    <el-form ref="form" :model="form" :rules="rules" class="myform">
      <h3>IHRM 后台管理系统</h3>
      <el-form-item prop="mobile">
        <el-input
          v-model="form.mobile"
          placeholder="请输入手机号"
          prefix-icon="el-icon-user-solid"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          class="mybtn"
          type="primary"
          @click="submit"
        >登录</el-button>
      </el-form-item>
      <el-form-item>
        <div class="text">还没有账号？<a href="#">立即注册</a></div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      form: {
        mobile: '', // 手机号
        password: '' // 密码
      },
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              // value被校验的参数
              // callback回调函数
              const reg =
                /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              // 判断value是否符合正则规则
              const bool = reg.test(value)
              // 使用三元表达式简化判断代码
              bool ? callback() : callback(new Error('手机号不合法'))
            },
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    ...mapActions({
      getToken: 'user/getToken'
    }),
    // 点击登录时触发
    submit() {
      // 完成全局表单校验
      this.$refs.form.validate(async(valid) => {
        // 显示加载状态
        this.loading = true
        if (valid) {
          // 校验通过
          try {
            // 调用store/user.js中的getToken方法
            await this.getToken(this.form)
            // 登陆成功后进行提示
            this.$message.success('用户登陆成功')
            const _redirect = this.$route.query._redirect
            if (_redirect) {
              this.$router.push(_redirect)
            } else {
              // 跳转
              this.$router.push('/')
            }
          } catch (error) {
            // console.log(error)
            this.$message.error(error.message)
          }
        } else {
          console.log('校验不通过')
        }
        // 关闭加载状态
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  background: url('../../assets/common/login.jpg') no-repeat center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .myform {
    width: 520px;
    padding: 28px 28px 10px;
    box-sizing: border-box;
    background: url('../../assets/common/蕾姆老婆.png');
    background-size: 100%;
    border-radius: 20px;
    text-align: center;
    h3 {
      color: #fff;
      font-size: 50px;
      font-weight: normal;
      margin: 0 0 15px;
    }
    .mybtn {
      width: 100%;
      height: 48px;
      font-size: 20px;
      margin-bottom: 0;
    }
    .text {
      // text-align: center;
      color: #fff;
      a {
        color: tomato;
      }
    }
    .el-form-item:nth-child(n + 4) {
      margin-bottom: 0;
    }
  }
}
::v-deep .el-input {
  input.el-input__inner {
    background-color: rgba(255, 255, 255, 0.5) !important;
    color: #68b1fe;
  }

  span.el-input__prefix {
    i.el-input__icon {
      color: #555;
    }
  }
}
</style>
